<template>
	<!-- 请假审批的卡片 -->
<!-- -->
	<div class="card-wrapper" :style="borderColor">
		<u-row>
			<u-col :span="8">
				<div class="my-sub-title">事假申请</div>
			</u-col>

			<u-col :span="4">
				<div style="font-size: 11px;">请假时长：{{ info.leaveDuration }}天</div>
			</u-col>
		</u-row>

		<!-- 分割线 -->
		<u-line border-style="solid" length="100%" style="margin: 10rpx 0;"></u-line>

		<u-row class="p">
			请假周期: {{ info.leavePeriod }}
		</u-row>
		<u-row class="p" style="color: #000000; font-weight: 700;">
			发起人: {{ info.userName }}
		</u-row>
		<u-row>
			请假去向: {{ info.leaveDestination }}
		</u-row>
		<!-- style="margin-top: -100rpx;" -->
		<u-collapse style="margin-top: -100rpx;">
			<u-collapse-item title="更多" align="right" style="padding-top: 30rpx;">

				<div class="p">请假原因: {{ info.leaveReason }}</div>
				<div>相关证明:</div>
				<div style=" padding: 30rpx 0;">
					<view v-if="vouchers.length === 0" class="no-voucher">暂无凭证</view>
					<u-row v-else>
						<u-col span="6" v-for="(item,index) in vouchers">
							<image :src="item" @click="zoomEmit(item)"></image>
						</u-col>
						
					</u-row>
				</div>
				<div>审批进度:</div>


				<step></step>

			</u-collapse-item>

		</u-collapse>

		<u-row>
			<u-col :span="8">
				<div style="margin-top: 0rpx;">
					{{ info.insertTime }}
				</div>
			</u-col>

			<!-- 根据情况显示不同的按钮个数 -->
			<u-col :offset="2" :span="2" v-if="type==='single_btn'">
				<u-button type="warning" size="mini" @click="revoke(info)">撤销</u-button>
			</u-col>
			
			<!-- <u-col :offset="2" :span="2" v-if="info.leaveState === 2">
			</u-col> -->
			
			<u-col :span="4" v-if="type==='my_revoke'">
				<view style="display: flex; flex-direction: row;">
					<u-button type="error" size="mini" @click="deleteById()">删除</u-button>
					<u-button type="default" size="mini" @click="reEdit()">修改</u-button>
				</view>
			</u-col>
			
			<u-col :span="4" v-if="type==='double_btn'">
				<view style="display: flex; flex-direction: row;">
					<u-button type="success" size="mini" style="margin-right: 10rpx;" @click="accept(info)">同意
					</u-button>
					<u-button type="error" size="mini" @click="reject(info)">拒绝</u-button>
				</view>
			</u-col>
		</u-row>
		
		
		
	</div>

</template>

<script>
	import step from '../components/step.vue'
	export default {
		methods: {
			reEdit: function() {
				let str = JSON.stringify(this.info)
				console.log(str)
				let url = '/pages/leave/index?info='+str
				uni.redirectTo({
				    url: url
				});
			},
			zoomEmit(item) {
				console.log('emit', item)
				this.$emit('zoomIn', item)
			},
			revoke: function(info) {
				console.log(info)
				this.$emit('revoke', info)

			},
			reject: function(info) {
				console.log('taskid', info.taskId)
				this.$emit('reject', info)
			},
			accept: function(info) {
				console.log(info.taskId)
				this.$emit('accept', info)
			},
			deleteById: function() {
				this.$emit('deleteById', this.info)
			}
		},
		components: {
			step
		},
		props: {
			info: Object,
			type: String
		},
		computed: {
			myself: function() {
				return this.$store.state.userInfo.name
			},
			vouchers: function() {
				let img = this.info.leaveVoucher.split('~')
				let res = []
				img.forEach(ele => {
					// console.log(ele)
					if (ele !== '') {
						res.push(this.$store.state.baseUrl + ele)
					} 
					
				})
				// console.log(res)
				return res
			},
			
			borderColor: function() {
				let color = ['#007AFF', '#39B54A', 'orange', 'red']
				return 'border-color: ' + color[this.info.leaveState]
			},
		},
		data() {
			return {
				zoomImgMask: true
			}
		}
	}
</script>

<style scoped>
	image {
		height: 200rpx;
		/* 固定图片的高度 */
	}

	.p {
		margin-bottom: 10rpx;
	}

	/* slide-fade 动画*/
	.slide-fade-enter-active {
		transition: all .3s ease;
	}

	.slide-fade-leave-active {
		transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
	}

	.slide-fade-enter,
	.slide-fade-leave-to

	/* .slide-fade-leave-active for below version 2.1.8 */
		{
		transform: translateX(10px);
		opacity: 0;
	}
	
	.no-voucher {
		color: #333333;
		text-align: center;
		font-size: 11px;
		font-weight: 700;
	}
</style>
